<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debug</title>

    <link rel="icon" href="img/logo.png" type="image/x-icon" />

    <script src="js/jquery.min.js"></script>

    <!-- eel(python) -->
    <script type="text/javascript" src="./eel.js"></script>

    <!-- Import Vue 3 -->
    <script src="js/m_vue3.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

    <!-- vue 路由 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script> -->

    <!-- axios -->
    <script src="js/m_axios.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

    <!-- Import component library -->
    <script src="js/m_element-plus.js"></script>
    <!-- <script src="https://unpkg.com/element-plus"></script> -->

    <!-- echarts -->
    <!-- <script src="js/echarts.js"></script> -->
    <script src="js/echart.min.js"></script>

    <!-- icon -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Import style -->
    <link rel="stylesheet" href="css/m_element-plus.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" /> -->

    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/m_vxe-table.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"> -->
    <!-- 引入脚本 -->
    <script src="js/m_xe-utils.js"></script>
    <!-- <script src="https://unpkg.com/xe-utils"></script> -->
    <script src="js/m_vx-table.js"></script>
    <!-- <script src="https://unpkg.com/vxe-table@next"></script> -->



    <link rel="stylesheet" href="css/index.css">
    <!-- <link rel="stylesheet" href="css/step.css"> -->

    <link rel="stylesheet" href="css/debug.css">

</head>

<body>

    <div id="app">
        <!-- 整个屏幕container -->
        <el-container class="index_container">
            <!-- mian-aside 左边 -->
            <el-aside width="200px" class="index_aside">
                <!-- aside 的顶部（icon 和 title） -->
                <div class="index_aside_top">
                    <img src="img/logo.png" alt="logo">
                    <span>TiTiuper</span>
                </div>


                <div class="index_aside_menu">
                    <!-- index 首页 -->
                    <div class="index_aside_menu_item" @click="jumpToHomeHtml">
                        <img src="/img/menu/index_gray.png" alt="首页">
                        <span>首页</span>
                    </div>
                    <!-- 股票管理 -->
                    <div class="index_aside_menu_item" @click="jumpToStockHtml">
                        <img src="/img/menu/list_gray.png" alt="股票管理">
                        <span>股票管理</span>
                    </div>
                    <!-- 策略管理 -->
                    <div class="index_aside_menu_item" @click="jumpToStrategyHtml">
                        <img src="/img/menu/task_gray.png" alt="策略管理">
                        <span>策略管理</span>
                    </div>
                    <!-- 单步执行 -->
                    <div class="index_aside_menu_item index_aside_menu_item_selected" @click="jumpToSetpHtml">
                        <img src="/img/menu/run_gray.png" alt="单步执行">
                        <span>单步执行</span>
                    </div>
                    <!-- 多股票执行 -->
                    <div class="index_aside_menu_item" @click="jumpToDebugHtml">
                        <img src="/img/menu/column.png" alt="多股票执行">
                        <span>多股票执行</span>
                    </div>
                    <!-- 数据调整 -->
                    <div class="index_aside_menu_item" @click="jumpToStrategyHtml">
                        <img src="/img/menu/data_gray.png" alt="数据调整">
                        <span>数据调整</span>
                    </div>
                    <!-- 运营管理 -->
                    <div class="index_aside_menu_item" @click="jumpTooperationHtml">
                        <img src="/img/menu/list_gray.png" alt="运营管理">
                        <span>运营管理</span>
                    </div>
                    <!-- 设置 -->
                    <!-- <div class="index_aside_menu_item">
                                        <img src="/img/menu/setting_gray.png" alt="设置">
                                        <span>Setting</span>
                                    </div> -->
                </div>

            </el-aside>

            <el-main>


                <el-header>
                    <el-container>
                        <i class="fa fa-linkedin-square margin10" style="margin: 0 10px;"></i>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="">promotion management</a></el-breadcrumb-item>
                            <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                            <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-container>
                    <el-divider />
                </el-header>

                <el-card class="main_card">

                    <el-scrollbar max-height="100%">

                        <el-main class="index_main">

                            <div class="echard_title_box">
                                <div class="card_title_box">
                                    <span class="card_title_box_chinese">脚本运行测试</span>
                                    <span>&nbsp;- Debug All Stock</span>
                                </div>
                            </div>

                            <el-divider></el-divider>


                            <!-- seq code name price 起始资金 最终资金 盈利率  -->

                            <div v-show="this.targetStrategyName">

                                <el-divider>
                                    <i class="fa fa-bitcoin"></i> 买入
                                </el-divider>

                                <div class="logic_box" v-for="(item, index) in this.targetStrategy.buyLogic"
                                    :key="index">
                                    <!-- 名字 -->
                                    <el-tooltip :content="item.comment" placement="top">
                                        <span style="width: 10%; text-align: center;">{{item.name}}</span>
                                    </el-tooltip>
                                    <!-- 内容 -->
                                    <el-input style="width: 80%;" type="textarea" autosize v-model="item.value"
                                        placeholder="自定义算式">
                                    </el-input>
                                    <el-button style="margin-left: 10px;" type="success" plain
                                        @click="buttonChangeLogicContent(true,item)">
                                        <i class="fa fa-plus-square"></i>
                                    </el-button>
                                    <el-button style="margin-left:10px;" type="danger" plain>
                                        <i class="fa fa-minus-square"></i>
                                    </el-button>
                                </div>

                                <el-divider>
                                    <i class="fa fa-money"></i> 卖出
                                </el-divider>

                                <div class="logic_box" v-for="(item, index) in this.targetStrategy.sellLogic"
                                    :key="index">
                                    <!-- 名字 -->
                                    <el-tooltip :content="item.comment" placement="top">
                                        <span style="width: 10%; text-align: center;">{{item.name}}</span>
                                    </el-tooltip>
                                    <!-- 内容 -->
                                    <el-input style="width: 80%;" type="textarea" autosize v-model="item.value"
                                        placeholder="自定义算式">
                                    </el-input>
                                    <el-button style="margin-left: 10px;" type="success" plain
                                        @click="buttonChangeLogicContent(false,item)">
                                        <i class="fa fa-plus-square"></i>
                                    </el-button>
                                    <el-button style="margin-left:10px;" type="danger" plain>
                                        <i class="fa fa-minus-square"></i>
                                    </el-button>
                                </div>

                            </div>

                            <div class="table_toolbar">
                                <div class="table_toolbar_left">
                                    <el-select v-model="targetStrategyName" placeholder="目标策略" size="large"
                                        @change="selectedStrategyHandler">
                                        <el-option v-for="item in strategyEnum" :key="item" :label="item"
                                            :value="item" />
                                    </el-select>
                                    <el-button style="margin: 0 10px;" @click="judgeSelected" type="danger"
                                        v-show="targetStrategyName">judge</el-button>
                                </div>
                                <div class="table_toolbar_right" v-show="flagOk">
                                    <el-button style="margin: 0 10px;" type="success" @click="this.drawer=true">Detail
                                    </el-button>
                                    <span>总盈利率：</span>
                                    <div class="progress_box">
                                        <el-progress type="line" :percentage="all_rate">
                                        </el-progress>
                                    </div>
                                </div>
                            </div>

                            <el-divider></el-divider>

                            <vxe-table ref="m_xTable" :data="tableData" @checkbox-all=""
                                @checkbox-change="selectChangeEvent1" stripe :loading="tableLoading"
                                :row-config="{isCurrent: true, isHover: true}">
                                <vxe-column type="checkbox" width="60"></vxe-column>
                                <vxe-column type="seq" title="No"></vxe-column>
                                <vxe-column field="code" title="Code" sortable></vxe-column>
                                <vxe-column field="name" title="Name"></vxe-column>
                                <vxe-column field="price" title="Price" sortable></vxe-column>
                                <vxe-column field="asset_beg" title="起始资金" formatter="formatFixedNumber"></vxe-column>
                                <vxe-column field="asset_end" title="结束资金" sortable formatter="formatFixedNumber">
                                </vxe-column>
                                <vxe-column field="rate" title="盈利率" sortable></vxe-column>
                                <vxe-column :formatter="this.buyAofB" title="购买次数" sortable></vxe-column>
                                <vxe-column :formatter="sellAofB" title="卖出数" sortable></vxe-column>
                                <vxe-column title="操作">
                                    <template #default="{row}">
                                        <el-button v-show="row.asset_end" type="danger" plain
                                            @click="selectTargetJudge(row)">
                                            <!-- <i class="fa fa-step-forward" style="margin: 0 5px;"></i>  -->
                                            查看
                                        </el-button>
                                    </template>
                                </vxe-column>
                            </vxe-table>

                        </el-main>

                    </el-scrollbar>


                    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
                        <span>策略数据分析</span>
                        <el-divider></el-divider>
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-card>
                                    <div class="stock_num_box">
                                        <span></span>
                                        <div class="stock_num_box_top margin_tb_10">
                                            <div class="flex_column_center margin_lr_20">
                                                <span>Stock Num</span>
                                                <span>{{this.stockNum}}</span>
                                            </div>
                                            <img src="img/stock.png" alt="股票数">
                                        </div>
                                        <div class="stock_num_box_bottom margin_tb_10">
                                            <div class="flex_row_center margin_lr_20">
                                                <span class="margin_lr_10">{{profitNum}}</span>
                                                <img src="img/line_up.png" alt="盈利个数" style="width: 30px;">
                                            </div>
                                            <div class="flex_row_center margin_lr_20">
                                                <span class="margin_lr_10">{{lossNum}}</span>
                                                <img src="img/line_down.png" alt="亏损个数" style="width: 30px;">
                                            </div>
                                        </div>
                                    </div>
                                </el-card>
                            </el-col>

                            <el-col :span="12">
                                <el-card>
                                    <div class="flex_row_center">
                                        <el-progress class="progress" type="circle"
                                            :percentage="this.getABS(this.allRate)" :color="this.getProgressColor()">
                                            <div>
                                                <div class="percentage_value">{{allRate}}%
                                                </div>
                                                <div class="percentage_label">All Rate</div>
                                            </div>
                                        </el-progress>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>

                        <div class="row_line_box">
                            <div class="row_line_item">
                                <span>最高盈利率</span>
                                <span>{{profitMax}}%</span>
                            </div>
                            <div class="row_line_item">
                                <span>最高亏损率</span>
                                <span>-{{lossMax}}%</span>
                            </div>
                            <div class="row_line_item">
                                <span>平均盈利率</span>
                                <span>{{meanProfit}}%</span>
                            </div>
                            <div class="row_line_item">
                                <span>平均亏损率</span>
                                <span>-{{meanLoss}}%</span>
                            </div>
                        </div>

                    </el-drawer>


                </el-card>
            </el-main>

        </el-container>
    </div>


    <script>

        // 打开警告弹窗
        const warn_noStrategy = () => {
            ElNotification({
                title: 'Warning',
                message: 'This is a warning message',
                type: 'warning',
            })
        };

        const App = {
            el: '#app',
            data() {
                return {


                    // init data
                    "strategyEnum": [],
                    "allStrategy": {},
                    "targetStrategyName": "",

                    "targetStrategy": {},

                    "allStock": [],
                    "stockEnum": [],


                    // 统计数据
                    "stockNum": 0,
                    "profitNum": 0,
                    "lossNum": 0,
                    "profitMax": 0,
                    "lossMax": 0,
                    "meanProfit": 0,
                    "meanLoss": 0,
                    "allRate": 0,
                    "meanRate": 0,
                    "profitArr": [],
                    "lossArr": [],


                    "xtable": null,

                    "table_header": "table_header",

                    "tableData": [
                        { code: "688321", "name": "微信生物" },
                        { code: "688047", "name": "龙芯中科" },
                    ],

                    "tableLoading": true,
                    "flagOk": false,
                    "all_rate": 0,

                    "drawer": false,

                }
            },


            methods: {
                //测试跳转test.html
                jumpToHomeHtml() {
                    window.location.href = "/home.html";
                },
                jumpToSetpHtml() {
                    window.location.href = "/step.html";
                },
                jumpToDebugHtml() {
                    window.location.href = "/debug.html";
                },
                jumpToStrategyHtml() {
                    window.location.href = "/strategy.html";
                },
                jumpTooperationHtml() {
                    window.location.href = "/operation.html";
                },
                jumpToStockHtml() {
                    window.location.href = "/stock.html";
                },


                // 输出"a/b"
                buyAofB({ cellValue, row, column }) {
                    if (row.goodBuyNum != null && row.buyNum != null) {
                        return row.goodBuyNum + "/" + row.buyNum;
                    }
                    return "/";
                },

                // 输出"a/b"
                sellAofB({ cellValue, row, column }) {
                    if (row.goodSellNum != null && row.sellNum != null) {
                        return row.goodSellNum + "/" + row.sellNum;
                    }
                    return "/";
                },


                // isBuy: true:买 false：卖
                // item ： {name,value,comment} 
                buttonChangeLogicContent(isBuy, item) {
                    console.log("change logic content");
                    console.log(item);
                    eel.change_logic_content(isBuy, this.targetStrategyName, item);
                },


                // 在debug页面选择已经judge好的目标code和策略
                selectTargetJudge(row) {
                    console.log('row :>> ', row);
                    code = row.code;
                    strategyName = this.targetStrategyName
                    eel.select_target_judge(code, strategyName)
                    // window.location.replace = "/step.html";
                    window.open("/step.html", "_blank")
                },


                getABS(data) {
                    if (data > 0) {
                        return data;
                    } else {
                        return -data;
                    }
                },



                getProgressColor() {
                    allRate = this.allRate;
                    if (allRate >= 0) {
                        return '#BE0F2E';
                    }
                    return "#0FBE2E";
                },



                // 选择策略后更新strategy内容
                selectedStrategyHandler() {
                    console.log("选择策略");
                    this.targetStrategy = this.allStrategy[this.targetStrategyName];
                    console.log(this.targetStrategy);
                },



                // 
                selectChangeEvent1({ checked, records, reserves, row }) {
                    console.log(row);
                },

                judgeSelected({ records }) {
                    // console.log(xtable);
                    this.tableLoading = true;
                    let all_data = this.xtable.data
                    let selected_data = this.xtable.getCheckboxRecords();
                    console.log("选中的数据");
                    console.log(selected_data);
                    // console.log(this.targetStrategyName);
                    judge_all_return = eel.judge_all(all_data, selected_data, this.targetStrategyName);

                    axios.get('stockDetail/all_stock_judge_result.json').then((res) => {
                        let data_arr = []
                        let data_str = res.data
                        this.tableData = data_str
                        console.log(this.tableData);
                        this.tableLoading = false;
                        this.flagOk = true;
                    });

                    axios.get('stockDetail/judge_analysis.json').then((res) => {
                        let data = res.data
                        this.profitNum = data.profitNum;
                        this.profitMax = data.profitMax.toFixed(2);
                        this.lossNum = data.lossNum;
                        this.lossMax = data.lossMax.toFixed(2);
                        this.meanProfit = data.meanProfit.toFixed(2);
                        this.meanLoss = data.meanLoss.toFixed(2);
                        this.stockNum = data.stockNum;
                        this.allRate = data.allRate.toFixed(2);
                        this.meanRate = data.meanRate.toFixed(2);
                        this.profitArr = data.profitArr;
                        this.lossArr = data.lossArr;

                    });
                },



                init_info() {
                    axios.get('json/init_info.json').then((res) => {
                        data = res.data
                        this.strategyEnum = data.strategyEnum
                        this.allStrategy = data.allStrategy

                        this.stockEnum = data.stockEnum
                        this.allStock = data.allStock

                        tableDataArr = []
                        // init table data
                        for (let i = 0; i < this.stockEnum.length; i++) {
                            itemName = this.stockEnum[i];
                            console.log(itemName);
                            stockItem = this.allStock[itemName];
                            // console.log(stockItem);
                            tableDataArr.push(stockItem);
                        }
                        this.tableData = tableDataArr
                        // console.log(this.tableData);
                        this.tableLoading = false;
                    });
                },


            },
            /*end - method */





            mounted() {

                this.xtable = this.$refs.m_xTable;
                this.init_info();
            },

        }

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.use(VXETable);
        app.mount("#app");

        VXETable.formats.mixin({
            // 四舍五入,默认两位数
            formatFixedNumber({ cellValue }, digits = 2) {
                return XEUtils.toFixed(XEUtils.round(cellValue, digits), digits)
            },
        });

    </script>

</body>

</html>